<!-- src/views/message.vue -->
<template>
  <div class="message">
    <!-- 顶部标题栏 -->
    <Navbar title="消息" placeholder bgColor="#161622">
      <template #right>
        <span class="contact-btn" @click="goToContact">联系人</span>
      </template>
    </Navbar>

    <!-- 四个消息分类按钮 -->
    <div class="message-tabs">
      <div class="tab-item" @click="goTo('/message/fan')">
        <div class="icon-wrapper">
          <Icon name="user" color="#409eff" size="26" />
          <div v-if="followerCount > 0" class="badge">{{ followerCount }}</div>
        </div>
        <span class="label">粉丝</span>
      </div>
      <div class="tab-item" @click="goTo('/message/like')">
        <div class="icon-wrapper">
          <Icon name="aixin" color="#f56c6c" size="26" />
          <div v-if="likeCount > 0" class="badge">{{ likeCount }}</div>
        </div>
        <span class="label">赞</span>
      </div>
      <div class="tab-item" @click="goTo('/message/my')">
        <div class="icon-wrapper">
          <Icon name="aite" color="#5cb85c" size="26" />
        </div>
        <span class="label">@我的</span>
      </div>
      <div class="tab-item" @click="goTo('/message/comment')">
        <div class="icon-wrapper">
          <Icon name="pinglun" color="#9b59b6" size="26" />
          <div v-if="commentCount > 1" class="badge">{{ commentCount }}</div>
        </div>
        <span class="label">评论</span>
      </div>
    </div>

    <!-- 聊天列表区域 -->
    <div class="chat-list" :class="{ 'active': sessions.length }">
      <div class="empty-state-image" v-if="sessions.length === 0">
        <img src="http://43.138.15.137:8080/assets/img/2.e9881162.jpg" alt="无聊天" class="empty-img" />
      </div>

      <!-- 使用 chatStore 的 sessions 渲染真实聊天会话 -->
      <SwipeCell v-for="session in sessions" :key="session.targetId" :title="session.userNickname"
        :description="session.lastMessage || '暂无消息'" :time="formatTimeAgo(session.lastTime)"
        :count="session.unreadCount" @click="goToChat(session)">
        <template #left-image>
          <img :src="session.userAvatar" loading="lazy" />
        </template>
        <template #right>
          <div class="delete-btn" @click.stop="deleteSession(session.targetId)">删除</div>
        </template>
      </SwipeCell>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineOptions } from 'vue'
defineOptions({
  name: 'Message',
})
import { useRouter } from 'vue-router'
import Icon from '@/components/common/Icon.vue'
import Navbar from '@/components/common/Navbar.vue'
import SwipeCell from '@/components/common/SwipeCell.vue'
import { formatTimeAgo } from '@/utils/time'
import { useChatStore } from '@/stores/chatStore'
import { useInteractionStore } from '@/stores/interaction'
const interactionStore = useInteractionStore()
// 评论数
const commentCount = computed(() => interactionStore.commentCount)
// 关注数
const followerCount = computed(() => interactionStore.followerCount)
// 点赞数
const likeCount = computed(() => interactionStore.likeCount)



// 获取聊天会话
const chatStore = useChatStore()
const sessions = computed(() => chatStore.sessions) // 已按时间倒序排列

// 模拟未读数（可后续替换为真实数据）
const unReadFan = ref(1)

const router = useRouter()

// 跳转到其他通知页
const goTo = (path) => {
  // 点击分类标签时，重置评论数
  if (path === '/message/comment') {
    interactionStore.resetCommentCount()
    // 重置关注数
  } else if (path === '/message/fan') {
    interactionStore.resetFollowerCount()
    // 重置点赞数
  } else if (path === '/message/like') {
    interactionStore.resetLikeCount()
  }
  router.push(path)
}

// 跳转到联系人页
const goToContact = () => {
  router.push('/message/contact')
}

// 跳转到聊天页
const goToChat = (session) => {
  router.push({
    path: '/chatroom',
    query: {
      targetId: session.targetId,
      userNickname: session.userNickname,
      userAvatar: session.userAvatar
    }
  })

  // ✅ 标记为已读（清除未读数）
  chatStore.markAsRead(session.targetId)
}

// 删除会话
const deleteSession = (targetId) => {
  chatStore.removeSession(targetId)
}
</script>

<style lang="scss" scoped>
.message {
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 消息分类标签
.message-tabs {
  @include flex-around;
  padding: 20px 0;
  border-bottom: 1px solid #333;
  background-color: #161622;

  .tab-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }

    .icon-wrapper {
      position: relative;
      width: 48px;
      height: 48px;
      margin: 0 auto;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;

      .badge {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 16px;
        height: 16px;
        background-color: #ff9800;
        color: white;
        border-radius: 50%;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
      }
    }

    .label {
      margin-top: 8px;
      font-size: 14px;
      color: #ccc;
    }
  }
}

// 聊天列表区域
.chat-list {
  flex: 1;
  background-color: #161622;
  @include flex-center;


  &.active {
    align-items: start;
    flex-direction: column;
    justify-content: start;
  }

  .empty-state-image {
    max-width: 314px;
    max-height: 340px;

    img {
      object-fit: contain;
    }
  }
}
</style>